<template>
  <div>
    <div class="rec_list">
      <ul>
        <li v-for="(el,idx) in show_list_data" :key="idx" @click="to_album(el.id)">
          <img :src="el.picUrl" alt />
        </li>
        <!-- 将 id_list (id 集合) 与 歌曲 idx (下标) 存至 vuex, 方便后续的上下首切换; -->
        <song
          v-for="(el, idx) in new_song_list"
          :key="el.id"
          :song_data="{
            song_name:el.name,
            ars:el.song.artists,
            album_name:el.song.album.name,
            id:el.id
          }"
          :id_list="id_list"
          :idx="idx"
        ></song>
      </ul>
    </div>
  </div>
</template>

<script>
import { get_banner, get_personalized, get_newsong } from "../../api/recommend";
import song from "../../components/song";
export default {
  data() {
    return {
      banner_data: [],
      list_data: [],
      new_song_list: [],
    };
  },
  async created() {
    get_banner().then((res) => {
      this.banner_data = res.data.banners;
    });
    get_personalized().then((res) => {
      this.list_data = res.data.result;
    });
    get_newsong().then((res) => {
      this.new_song_list = res.data.result;
    });
  },
  components: {
    song,
  },
  methods: {
    to_album(id) {
      this.$router.push({
        name: "Album",
        params: {
          id: id,
        },
      });
    },
  },
  computed: {
    // 使用 计算属性来 限制数组渲染的长度;
    // cli 中禁止使用 v-if 来限制 v-for 渲染
    show_list_data() {
      return this.list_data.slice(0, 6);
    },
    // 使用计算属性来筛选出 新歌榜 内所有歌曲的 id 集合;
    id_list() {
      return this.new_song_list.map((el) => el.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.rec_list {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 33.33%;
      font-size: 0;
      img {
        width: 100%;
      }
    }
  }
}
</style>